【SCSS対応】CSS3PsプラグインでCSS3によるWebデザインの再現度を上げ効率化する

野中龍一

2012.12.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

PhotoshopのデザインをCSS3に落とし込む際、Photoshopのレイヤースタイルの数値を細かくチェックしてCSSを組んでいくのは手間でこんなもんだろうっていう感覚でやってしまうことも多いと思います。
ちょっと前に話題になっていたフリーのプラグインなので今更ですが、「CSS3Ps」を試してみて、注意点などをまとめてみました。

インストール

CSS3Ps

上のリンクからCSS3Psのサイトに移動します。
まずは右上の「Free Download」を押して、プラグインファイルをダウンロードしましょう。

ダウンロードファイルは以下の2つに別れています。

Download for Adobe Photoshop CS5 and CS6
Download for Adobe Photoshop CS3 and CS4

Mac OS X Lionの場合はAdobeから提供されているパッチのインストールが必要です。

インストールの手順

インストールのプロセスはCSのバージョンごとに若干違うのでここちらのインストール方法を参考にしてください。

この記事ではCS6でプラグインを使っています。

サンプルファイル

今回はこのサンプルにCSS3Pｓを使ってみます。
サンプルファイルをgithub「css3ps_sample / design /」に上げてあるので良いサンプルがなければ使ってみてください。

試してみる

サンプルファイルを開いて、生成したいレイヤーグループを選択します。単体のオブジェクトでも可能です。
今回はボタンレイヤー全体のスタイルを生成したいのでボタンレイヤーのグループを選択します。

生成する

ボタンを押して実行してみます。
生成するとブラウザでCSSのソースコードとサンプルが表示されます。生成したサンプルはこちら。

選択できる生成タイプ

3つのタイプではき出されます。
SCSSではき出してくれるのはうれしいですね。画面の右下にこの3つのボタンがあるので任意の物を選択します。今回はこの中でSCSSを利用します。

CSS
SCSS
SASS

生成されたSCSS

少し長いですがこんなSCSSをはき出してくれます。
注意点として、Displayやmargin、paddingなどは指定してくれないので、そこは手動で設定する必要があります。

label
{
	font-family: "Museo Sans";
	font-size: 20px;
	color: #141418;
	@include text-shadow(1px 1px rgba(255,255,255,.3));
}

btn_bg
{
	width: 270px;
	height: 50px;
	@include border-radius(3px);
	background-color: #fff;
	@include box-shadow(0 1px 10px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.3), inset 0 0 10px rgba(37,37,39,.2));
	@include background-image(linear-gradient(bottom, #35c6f0, #56d9ff 12%, #0085ab));
}

label
{
	font-family: "Museo Sans";
	font-size: 20px;
	color: #141418;
	@include text-shadow(1px 1px rgba(255,255,255,.3));
}

btn_bg
{
	width: 270px;
	height: 50px;
	@include border-radius(3px);
	background-color: #fff;
	@include box-shadow(0 1px 10px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.3), inset 0 0 10px rgba(37,37,39,.2));
	@include background-image(linear-gradient(top, #35c6f0, #56d9ff 12%, #0085ab));
}

wrapper
{
	width: 290px;
	height: 70px;
	@include border-radius(3px);
	background-color: rgba(255,255,255,0);
	@include box-shadow(1px 1px rgba(255,255,255,.05), inset 0 0 10px rgba(0,0,0,.5));
}

調整したCSS

実際のレイアウトに合うようにスタイルを調整します。

/* *****************************
 *
 * Navigation button styles
 *
 **************************** */
#joinButtonSection
{
    //layout
    margin: 20px auto 0 auto;
    width:             290px;
}

#joinButtonWrapper
{
    //layout
    padding:     10px;
    width:      270px;
    height:      50px;

    @include border-radius(3px);
    
    background-color: rgba(255,255,255,0);
    @include box-shadow(1px 1px rgba(255,255,255,.05), inset 0 0 10px rgba(0,0,0,.5));
}

#joinButton
{
    //layoout
    display:  block;
    width:    270px;
    height:    50px;

    //ornament
    @include border-radius(3px);
    
    //background
    background-color: #fff;
    @include box-shadow(0 1px 10px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.3), inset 0 0 10px rgba(37,37,39,.2));
    @include background-image(linear-gradient(top, #35c6f0, #56d9ff 12%, #0085ab));

    //typo
    font-family: "Museo Sans";
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #141418;
    @include text-shadow(1px 1px rgba(255,255,255,.3));

    //hover style
    &:hover
    {
        //background
        background-color: #fff;
        @include box-shadow(0 1px 10px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.3), inset 0 0 10px rgba(37,37,39,.2));
        @include background-image(linear-gradient(bottom, #35c6f0, #56d9ff 12%, #0085ab));
    }
}